/*
 * @Author: Drc
 * @Date: 2021-05-19 18:49:45
 * @LastEditTime: 2021-09-13 16:56:10
 * @LastEditors: yuta
 */

/*
 * @Author: Drc
 * @Date: 2021-07-22 15:48:04
 * @LastEditTime: 2021-07-22 16:59:10
 * @LastEditors: Drc
 */

import React, {memo} from 'react'
import {Platform, TextInput, View} from 'react-native'
import i18n from 'i18n-js'
import Pop, {PopProps} from './index'
import Theme from '@path/config/theme'
import {px2dp} from '@path/config/system'
import {ThemeText} from '@path/components/ThemeComponents'
import _ from 'lodash'
import Locale from '@path/locale'

interface GoogleAuthPopProps extends PopProps {
  length: number
  onConfirm: (code: string) => any
}

class GoogleAuthPop extends Pop<GoogleAuthPopProps> {
  constructor(props: any) {
    super(props)
  }

  static defaultProps: GoogleAuthPopProps = {
    animationIn: 'slideInUp',
    animationOut: 'slideOutDown',
    // style: {justifyContent: 'flex-end'},
    onBackButtonPress: () => {},
    onBackdropPress: () => {},
    length: 6,
  }

  state = {
    code: '',
  }

  onClose = () => {}

  componentDidMount() {}

  componentDidUpdate() {
    if (this.state.code && this.state.code.length === this.props.length) {
      typeof this.props.onConfirm === 'function' && this.props.onConfirm(this.state.code)
      this.setState({code: ''})
    }
  }

  _renderInput = () => {
    let list = new Array(this.props.length).fill({})

    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          flexWrap: 'nowrap',
          marginTop: px2dp(24),
        }}>
        {list.map((item, index) => {
          return (
            <View
              key={index}
              style={{
                flex: 1 / list.length,
                height: px2dp(38),
                marginLeft: index === 0 ? 0 : px2dp(10),
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 8,
                backgroundColor: Theme.getThemeColor('bg'),
                borderWidth: 1,
                borderColor: '#E0E0E0',
              }}>
              <ThemeText
                style={{
                  fontSize: 24,
                }}>
                {this.state.code[index]}
              </ThemeText>
            </View>
          )
        })}
        <TextInput
          autoFocus={Platform.OS === 'ios'}
          clearButtonMode={'never'}
          value={this.state.code}
          inputStyle={{paddingHorizontal: 0}}
          style={{
            opacity: 0,
            height: '100%',
            position: 'absolute',
            width: '100%',
          }}
          maxLength={this.props.length}
          onChangeText={(text) => {
            if (isNaN(Number(text))) {
              return
            }
            this.setState({
              code: text,
            })
          }}
          keyboardType={'number-pad'}
        />
      </View>
    )
  }

  renderContent = () => {
    return (
      <View
        style={{
          width: px2dp(327),
          backgroundColor: Theme.getThemeColor('bg_deep'),
          borderRadius: 8,
          paddingVertical: px2dp(24),
          paddingHorizontal: px2dp(16),
          alignSelf: 'center',
        }}>
        <ThemeText
          style={{
            textAlign: 'center',
            fontSize: 15,
          }}>
          {Locale.getString('security.google_auth_title')}
        </ThemeText>
        {this._renderInput()}
      </View>
    )
  }
}

export default memo(GoogleAuthPop, (prev, next) => _.isEqual(prev.isVisible, next.isVisible))
